<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报名表</title>


    <style>
        #all{
            width:650px;
            height:800px;
            border:4px solid #EEEEEE;
            color:#6785b4;
            margin:0 auto;
            box-shadow:5px 5px 7px  #8a8888
        }
        #left{
            width:150px;
            height:800px;
            float:left;
        }
        #center{
            width:500px;
            height:800px;
            float:left;
            left:50%;
            top:50%;
            margin:90px 0 0 -20px;
        }
        #center table{
            width:100%;
        }
        .cell1{
            text-align:right;
            padding-right:10px;
        }
        .cell2{
            width:350px;
            height:25px;
            border:1px solid #6785b4;
            border-radius:7px;
            padding-left:10px;
        }
        .cell3{
            
            background-color:#6785b4;
            width:100px;
            height:40px;
            font-size:17px;
            border:1px solid #6785b4;
            border-radius:20px;
            margin-left:80px;
            float:left;
            cursor:pointer;
        }
        .cell4{
            border:1px solid #6785b4;
            width:425px;
            height:30px;
            border-radius:5px;
            padding-left:5px;
        }
        .cell5{
            padding-left:12px;
        }
        textarea{
            resize:none;
            height:50px;
            width:413px;
            border:1px solid #6785b4;
            border-radius:5px;
            padding-left:7px;
        }

        #left .one{
            color:#6e8ab4;
            font-size:25px;
            margin-left:15px;
        }
    </style>
</head>
<body>
    <div id="all">
        <div id="left">
            <p class="one">报名表:</p>
        </div>
        <div id="center">
            <form action="#" methor="post">
                <table>
                    <tr>
                        <td class="cell1">照片：</td>
                        <td> <input type="file"></td>
                    </tr>
                    <tr>
                        <td class="cell1"><label for="zhuanghu">姓名：</label></td> 
                        <td><input id="zhuanghu" class="cell2" type="text" name="username" placeholder="请输入姓名" /></td>  
                    </tr>
                    <tr>
                        <td class="cell1"><label for="xuehao">学号：</label></td>
                        <td><input id="xuehao" class="cell2" type="text" name="studentID" placeholder="输入学号" /></td>
                    </tr>
                    <tr>
                        <td class="cell1"><label for="shouji">手机：</label></td>
                        <td><input id="shouji" class="cell2" type="text" name="mobileNumber" placeholder="输入手机号（用于公布面试结果）"/></td>
                    </tr>
                    <tr>
                        <td class="cell1"><label for="QQ">QQ：</label></td> 
                        <td><input id="QQ" class="cell2" type="text" name="QQnumber" placeholder="输入qq号"/></td>
                    </tr>
                    <tr>
                        <td class="cell1"><label for="youxiang">邮箱：</label></td>
                        <td><input id="youxiang" class="cell2" type="text" name="emilenumber" placeholder="请输入QQ邮箱" /></td>
                    </tr>
                    <tr>
                        <td class="cell1"><label for="qinshi">寝室：</label></td>
                        <td><input id="qinshi" class="cell2" type="text" name="dormnumber" placeholder="请输入寝室号，用于即时发送物件"/></td>
                    </tr>
                    <tr>
                        <td class="cell1">性别：</td>
                        <td> 
                            <label><input type="radio" value="girl" name="gender" checked="checked" />女</label> 
                            <label> <input type="radio" value="boy" name="gender" />男</label>
                        </td>
                    </tr>  
                </table>
                <table>
                    <tr>
                        <td class="cell5"> 
                            <select class="cell4">
                                <option value="类" select="select">计算机大类</option>
                                <option value="美">中美班</option>
                                <option value="educate">教育技术学</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell5">
                            <select class="cell4">
                                <option value="one" selected="selected">大一</option>
                                <option value="two">大二</option>
                                <option value="three">大三</option>
                                <option value="four">大四</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell5">                
                            <select class="cell4">
                                <option value="frontend" selected>前端</option>
                                <option value="afterend">后端</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="cell5">
                            <select class="cell4">
                                <option selected>18</option>
                                <option>19</option>
                                <option>20</option>
                                <option>21</option>
                                <option>22</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <table>
                    <tr class="cell6">&nbsp&nbsp&nbsp个人简介</tr>
                    <br> 
                    <tr >&nbsp&nbsp&nbsp<textarea placeholder="提示：随便写"></textarea></tr>
                    <br>
                    <tr class="cell6">&nbsp&nbsp&nbsp掌握技能</tr>
                    <br>
                    <tr class="cell6">&nbsp&nbsp&nbsp<textarea placeholder="填写专业技能哦"></textarea></tr> 
                </table>
                <input class="cell3" type="submit" value="提交" />
                <input class="cell3" type="reset" value="重置" />
                    
                
            </form>
        </div>

    </div>
    
</body>
</html>